<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Some tools in jqxToolBar can be made non-minimizable and some
        - not to appear in the pop-up menu when they are minimized.</title>
    <meta name="description" content="Some tools in jqxToolBar can be made non-minimizable and some - not to appear in the pop-up menu when they are minimized." />
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <style type="text/css">
        .buttonIcon
        {
            margin: -5px 0 0 -3px;
            width: 16px;
            height: 17px;
        }
    </style>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#window").jqxWindow({ width: 700, minWidth: 250, height: 250, position: { x: 5, y: 60 },
                initContent: function () {
                    $("#jqxToolBar").jqxToolBar({ width: "100%", height: 35, minimizeWidth: 200,
                        tools: 'button button button | toggleButton | dropdownlist combobox | input',
                        initTools: function (type, index, tool, menuToolIninitialization) {
                            if (type == "button") {
                                var icon = $("<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>");
                            }
                            switch (index) {
                                case 0:
                                    icon.addClass("jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme);
                                    icon.attr("title", "Bold");
                                    tool.append(icon);
                                    break;
                                case 1:
                                    icon.addClass("jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme);
                                    icon.attr("title", "Italic");
                                    tool.append(icon);
                                    break;
                                case 2:
                                    icon.addClass("jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme);
                                    icon.attr("title", "Underline");
                                    tool.append(icon);
                                    break;
                                case 3:
                                    tool.jqxToggleButton({ width: 80, toggled: true });
                                    tool.text("Enabled");
                                    tool.on("click", function () {
                                        var toggled = tool.jqxToggleButton("toggled");
                                        if (toggled) {
                                            tool.text("Enabled");
                                        } else {
                                            tool.text("Disabled");
                                        }
                                    });
                                    break;
                                case 4:
                                    var dropDownListWidth;
                                    if (menuToolIninitialization) {
                                        // specific setting for minimized tool
                                        dropDownListWidth = "100%";
                                    } else {
                                        dropDownListWidth = 130;
                                    }
                                    tool.jqxDropDownList({ width: dropDownListWidth, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                                    break;
                                case 5:
                                    var comboBoxWidth;
                                    if (menuToolIninitialization) {
                                        // specific setting for minimized tool
                                        comboBoxWidth = "100%";
                                    } else {
                                        comboBoxWidth = 50;
                                    }
                                    tool.jqxComboBox({ width: comboBoxWidth, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                                    tool.css("border-color", "#CC0000");
                                    return { minimizable: false };
                                case 6:
                                    tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                                    tool.css("border-color", "#EE8D4D");
                                    return { menuTool: false };
                                    break;
                            }
                        }
                    });
                }
            });
        });
    </script>
</head>
<body>
    <div style="font-size: small; font-family: Verdana;">
        Resize the window to minimize or restore tools. The <span style="color: #CC0000;">combobox</span>
        is non-minimizable and the <span style="color: #EE8D4D;">input</span> does not appear
        in the pop-up menu when minimized.</div>
    <div id="window">
        <div>
            Resizable jqxToolBar</div>
        <div>
            <div id="jqxToolBar">
            </div>
        </div>
    </div>
</body>
</html>
